import type React from 'react'
import { Collapse, Row, Col } from 'antd'
import type { CollapseProps } from 'antd'
import { categories } from './categories'
import { useStyles } from './drageBox.styles'
import SourceBox from '../components/SourceBox'

export const DrageBox: React.FC = () => {
  const { styles } = useStyles()

  const collapseItems: CollapseProps['items'] = categories.map(category => ({
    key: category.key,
    label: category.label,
    children: (
      <Row gutter={[0, 0]}>
        {category.items.map(item => (
          <Col className={styles.dragBoxItem} span={8} key={item.id}>
            {/* TODO 样式 */}
            <SourceBox data={{ type: item.type }}>
              <item.icon />
              <div>{item.text}</div>
            </SourceBox>
          </Col>
        ))}
      </Row>
    ),
  }))

  return (
    // TODO 样式固定否者宽度会变动，怎么样宽度，但不写死
    <Flex className={styles.dragBox}>
      <Collapse items={collapseItems} defaultActiveKey={['1']}></Collapse>
    </Flex>
  )
}

const Flex: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {
  return <div {...props} />
}